<template>
  <view class="activity">
    <nav-tab
      :items="tabList"
      v-model="currentTab"
      @change="handleTabChange"
    />
    <view class="tips">
      所有商品均支持【雪王币+现金】混合支付，进入商品页面后点击“马上兑换”，选择<text
        class="text-primary"
        >混合支付</text
      >。
    </view>
    <scroll-view
      :style="{ height: scrollHeight + 'px' }"
      scroll-y
    >
      <view class="pb-lg">
        <home-item-list
          :show-header="false"
          btn-type="default"
          :items="activityList"
        />
      </view>
    </scroll-view>
  </view>
</template>
<script>
import { mapState, mapActions } from "vuex"
import HomeItemList from "../HomItemList/HomeItemList.vue"
export default {
  name: "Coupons",
  components: {
    HomeItemList
  },
  data() {
    return {
      scrollHeight: 0,
      currentTab: 0,
      tabList: ["四亿专属", "玩偶手办", "茶包咖啡", "雪王零食"]
    }
  },
  computed: {
    ...mapState("mosushop", ["activityList"])
  },
  created() {
    this.scrollHeight = uni.getSystemInfoSync().windowHeight - 44 - uni.upx2px(312)
    this.getActivityListAction(this.currentTab)
  },
  methods: {
    ...mapActions("mosushop", ["getActivityListAction"]),
    handleTabChange() {
      this.getActivityListAction(this.currentTab)
    }
  }
}
</script>
<style lang="scss" scoped>
.activity {
  background-color: #fff;
}

.tips {
  height: 140rpx;
  text-align: center;
  font-size: $uni-font-size-lg;
  color: $uni-text-color;
  line-height: 1.5;
  font-weight: bold;
  padding: 20rpx 40rpx;
}
</style>
